<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description"
	content="碳氢知识平台由碳三氢二个人创建，属于免费开放的知识浏览平台。该平台主要用于学习Java相关的知识。">
<meta name="keywords"
	content="碳氢知识,碳三氢二,tansanqinger,tanqingzhishi,C3H2,c3h2,碳十八氢十二,碳三,tansan,C18H12">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="spm_prefix" content="333.851">
<link rel="icon" href="/img/index.ico" />
<link rel="shortcut icon" href="/img/index.ico" />
<meta charset="UTF-8" name="viewport"
	content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<title>碳氢知识</title>
<style type="text/css">
*{margin:0px auto;padding:0px auto;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
body,html{background-color:#F5F5F5; width: 100%; height: 100%;min-width: 1280px;min-height: 800px;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;}
.paddingRightLeft0{padding-right:0px;padding-left: 0px;}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto{padding-left: 0px;padding-top: 0px;}
.pageTopSize{width: 100%;height: 90%;margin-top: 0px;margin-left: 0px;margin-bottom: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;}
.pageBottomSize{width: 100%;height: 10%;margin-top: 0px;margin-left: 0px;margin-bottom: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;}
.fixed{position: fixed;left: 0px;bottom: 0px;width: 100%;height: 54px;z-index: 9999;background-color:	#F5F5F5;}
.fixedBottom{left: 0px;bottom: 0px;width: 100%;height: 54px;}
a:link{color: #000;}
a:visited{color: #000;}
a:hover {text-decoration: none;}
.viridian{background-color: #3F7F62;}
.turquoise{background-color: #40E0D0;}
.layui-nav .layui-nav-more{border-top-color:#000000;margin-top: -0px;}
.layui-nav .layui-nav-mored{border-color: transparent transparent #000000;margin-top: -5px;}
.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; }
.A { height: 70px; position: absolute; top: 0 ; left: 0 ; width: 100%; }
.B { height: 100%;}
</style>
</head>
<body>
	<div class="outer">
        <div class="A">
        	<div class="container-fluid B">
			  <div class="row B">
				<div style="text-align: center; height:70px; line-height:90px;">
				   <img alt="" src="/img/logo_interface.png" style="height: 40px; display: inline-block; vertical-align: middle;padding:0 1.75rem" />
				</div>
			    <div class="col-6" style="line-height: 90px; font-size: 30px;">
			    	<ul class="layui-nav" lay-filter="" style="background-color: #F5F5F5; ">
					  <li class="layui-nav-item layui-this "><a href="" style="font-size: 30px; color: #000000;">首页</a></li>
					  <li class="layui-nav-item ">
					  	<a href="javascript:;" style="font-size: 30px; color: #000000;">学习</a>
					    <dl class="layui-nav-child"> <!-- 二级菜单 -->
					      <dd><a href="/second/knowledge/ede34543a.12c3b7348ad44aefb76e1fa8ce3.60d1a3b155" style="height: 30px; line-height: 26px;">九年级上册</a></dd>
					      <dd><a href="/second/knowledge/6b17e.28a487c2-d4ef464a90cd3b372a9374.dd87yy2ae4" style="height: 30px; line-height: 26px;">九年级下册</a></dd>
					      <dd><a href="/second/knowledge/4d932c.314918155faf43c5-bd95629543fd55da.fge432d" style="height: 30px; line-height: 26px;">必修一</a></dd>
					      <dd><a href="/second/knowledge/f43f.46e77b5037b44b78baee7bd49af2cfce48.3254f2ds" style="height: 30px; line-height: 26px;">必修二</a></dd>
					      <dd><a href="/second/knowledge/fdsa322.5eb809804ba94476bfdsa2bf70dec6e00326.3df" style="height: 30px; line-height: 26px;">必修三</a></dd>
					      <dd><a href="/second/knowledge/3.625dd872ae.f68e8b7bbdebbh415d8bad62daa9b5db712" style="height: 30px; line-height: 26px;">必修四</a></dd>
					    </dl>
					  </li>
					  
					  <li class="layui-nav-item ">
					    <a href="javascript:;" style="font-size: 30px; color: #000000;">题库</a>
					    <dl class="layui-nav-child"> <!-- 二级菜单 -->
					      <dd><a href="" style="height: 30px; line-height: 26px;">选择题</a></dd>
					      <dd><a href="" style="height: 30px; line-height: 26px;">判断题</a></dd>
					      <dd><a href="" style="height: 30px; line-height: 26px;">填空题</a></dd>
					      <dd><a href="" style="height: 30px; line-height: 26px;">计算题</a></dd>
					    </dl>
					  </li>
		  			<li class="layui-nav-item " ><a href="" style="font-size: 30px; color: #000000;">交流</a></li>
				 </ul>
			    </div>
			    <div class="col" style="text-align: right; line-height: 90px; font-size: 16px;word-spacing: 16px;">
					<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-search" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
					  <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
					  <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
					</svg>
					<span onclick="showImg()">手机APP</span>
					<span th:if="${user}==null">
						<a href="/login">登陆</a>
						<a href="/login/register">
							<button type="button" class="btn btn-primary">注册</button>
						</a>
					</span>
					<span th:if="${user}!=null">
						<span class="btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							<img th:src="@{${user.img}}" style="width: 40px; height: 40px; border-radius: 50%;" alt="头像">
						</span>
						<div class="dropdown-menu">
							<a class="dropdown-item" th:if="${user.jurisdiction}==0" href="/"
								style="height: 30px; line-height: 30px;" target="_blank">账号中心</a>
							<a class="dropdown-item" href="/" style="height: 30px; line-height: 30px;">消息中心</a>
							<a class="dropdown-item" href="/" style="height: 30px; line-height: 30px;">退出登陆</a>
						</div>
					</span>
			    </div>
			  </div>
			</div>
        </div>
        	<div class="B">
        		  <div class="container-fluid B">
					  <div class="row B">
					    <div class="col-sm-3 B paddingRightLeft0" style="background-color: #e2e2e2;" >
					      <div id="test" class="" style="height: 100%; overflow: scroll;">
					      	<div class="accordion" id="accordionExample">
							  <div class="card" th:each="list : ${message}">
							    <div class="card-header" id="headingOne" th:if="${listStat.index}%2==0">
							      <h2 class="mb-0">
							        <span th:if="${list}!=null" class="btn btn-block text-left" style="color: #007bff;font-size: 20px;" data-toggle="collapse" th:attr="data-target='#collapse'+${listStat.index}/2" aria-expanded="true">
							          	[[${list.cname}]]
							        </span>
							      </h2>
							    </div>
							    <div th:if="${listStat.index}%2!=0 and ${listStat.index}==${count}" th:id="'collapse'+${listStat.index-1}/2" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
							      <div class="card-body">
							      		<p th:each="data : ${list}" style="color: #007bff;font-size: 16px; padding:.25rem 1.75rem">[[${data.cname}]]</p>
							      </div>
							    </div>
							    <div th:if="${listStat.index}%2!=0 and ${listStat.index}!=${count}" th:id="'collapse'+${listStat.index-1}/2" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
							      <div class="card-body">
							      		<p th:each="data : ${list}" style="color: #007bff;font-size: 16px; padding:.25rem 1.75rem">[[${data.cname}]]</p>
							      </div>
							    </div>
							  </div>
							</div>
					      </div>
					    </div>
					    
					    <div class="col-sm-9 paddingRightLeft0" style="background-color: #fff;">
					      	<iframe name="mainFrame" id="mainFrame" frameborder="0" src="https://blog.csdn.net/C18H12/article/details/108976311" style="margin:0 auto;width:100%;height:99%;"></iframe>	
					    </div>
					  </div>
        	</div>
    </div>
  
</div>
</body>
</html>
<script>

layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>